<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<h2>Test Git</h2>
<h3><button onclick="addDiv()">添加</button></h3>
<table border="1px">
    <thead>
        <td>id</td>
        <td>姓名</td>
        <td>班级</td>
        <td>操作</td>
    </thead>
    <tr></tr>
</table>
<div style="display: none">
    姓名：<input id="name"><br>
    班级:<input id="banji"><br>
    <button onclick="add()">提交</button>
</div>
<div id="xg" style="display: none">
    id:<input name="id" readonly="readonly"><br>
    姓名：<input name="name"><br>
    班级:<input name="banji"><br>
        <button onclick="xiugai()">修改</button>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.serializejson.js"></script>
<script>
    jiazai()
    function jiazai() {
      $.getJSON("http://localhost:8080/shou",function (data) {
          $("table tbody").empty()
          for (let i = 0; i < data.length; i++) {
              $("table tbody").append(
                  "<tr><td>" + data[i].id +
                  "</td><td>" + data[i].name +
                  "</td><td>" +data[i].banji +
                  "</td><td><button onclick='xsxg("+data[i].id+")'>修改</button><button onclick='del("+data[i].id+")'>删除</button></td></tr>");
          }
      })
    }

    function del(id) {
        $.post("http://localhost:8080/shou/del",{id:id},function (data) {
            jiazai();
      })
    }
    function xsxg(xx) {
        let xg = document.getElementById("xg");
        if (xg.style.display=='none'){
            xg.style.display='block'
        }else {
            xg.style.display='none'
        }
        $.ajax({
            type:"get",
            dataType:"json",
            url:"cha/"+xx,
            success:function (data) {
                $("[name=id]").val(data.id);
                $("[name=name]").val(data.name);
                $("[name=banji]").val(data.banji);
            }
        })
    }
    function xiugai() {
        var xx={
        id:$("[name=id]").val(),
        name:$("[name=name]").val(),
        banji:$("[name=banji]").val()
        }
        let test = JSON.stringify(xx);
        $.ajax({
            type:"post",
            dataType:"json",
            url:"cha/xg",
            contentType:"application/json;charset=utf-8",
            data:test,
            success:function (data) {
                document.getElementById("xg").style.display='none'
                jiazai()
            }
        })
    }
    function addDiv() {
        $("div").eq(0).css("display","block")
    }
    function add() {
        let name = $("#name").val();
        let banji = $("#banji").val();
        $.getJSON("http://localhost:8080/add",{name:name,banji:banji},function (data) {
            console.log(data)
            $("div").eq(0).css("display","none")
            jiazai()
        })
    }
</script>
</html>
